<template>
  <div class="flex items-center gap-3 px-4 py-2 bg-white border-b border-gray-200">
    <!-- dlv状态指示器 -->
    <div class="flex items-center gap-2">
      <div
        class="w-2 h-2 rounded-full"
        :class="dlvInfo.available ? 'bg-green-500' : 'bg-red-500'"
      ></div>
      <span class="text-sm text-gray-700 font-medium">Delve:</span>
      <span class="text-xs text-gray-600">
        {{ dlvInfo.available ? `v${dlvInfo.version}` : '未安装' }}
      </span>
    </div>

    <!-- dlv路径 -->
    <div v-if="dlvInfo.available && dlvInfo.path" class="flex items-center gap-2 text-xs text-gray-500">
      <i class="el-icon-folder-opened"></i>
      <span class="max-w-xs overflow-hidden text-ellipsis whitespace-nowrap" :title="dlvInfo.path">
        {{ formatPath(dlvInfo.path) }}
      </span>
    </div>

    <!-- 操作按钮 -->
    <div class="ml-auto flex items-center gap-2">
      <el-button
        type="text"
        icon="el-icon-refresh"
        size="small"
        :loading="checking"
        @click="checkDlv"
        class="!text-primary-500 hover:!text-primary-600"
      >
        检查
      </el-button>
      <el-button
        type="text"
        icon="el-icon-folder-opened"
        size="small"
        @click="selectDlvPath"
        class="!text-primary-500 hover:!text-primary-600"
      >
        选择路径
      </el-button>
    </div>

    <!-- 错误提示 -->
    <el-tooltip
      v-if="!dlvInfo.available && dlvInfo.error"
      :content="dlvInfo.error"
      placement="bottom"
    >
      <i class="el-icon-warning text-yellow-500 cursor-pointer"></i>
    </el-tooltip>
  </div>
</template>

<script>
import debuggerApi from '../api/debugger'

export default {
  name: 'DlvStatus',
  data() {
    return {
      dlvInfo: {
        available: false,
        version: '',
        path: '',
        error: ''
      },
      checking: false
    }
  },
  mounted() {
    // 延迟检查，确保Electron IPC已经准备好
    setTimeout(() => {
      this.checkDlv()
    }, 500)
  },
  methods: {
    async checkDlv() {
      this.checking = true
      try {
        const result = await debuggerApi.checkDlvVersion()
        this.dlvInfo = {
          available: result.available,
          version: result.version || '',
          path: result.path || '',
          error: result.error || ''
        }

        if (result.available) {
          this.$message.success(`Delve v${result.version} 可用`)
        } else {
          this.$message.warning('未检测到Delve，请安装或指定路径')
        }
      } catch (error) {
        console.error('检查dlv失败：', error)
        this.$message.error('检查dlv失败：' + error.message)
        this.dlvInfo = {
          available: false,
          version: '',
          path: '',
          error: error.message
        }
      } finally {
        this.checking = false
      }
    },

    async selectDlvPath() {
      try {
        const result = await debuggerApi.selectDlvPath()

        if (result.canceled) {
          return
        }

        if (result.success) {
          this.dlvInfo = {
            available: true,
            version: result.version,
            path: result.path,
            error: ''
          }
          this.$message.success(`已选择 Delve v${result.version}`)
        } else {
          this.$message.error(result.error || '选择的文件无效')
        }
      } catch (error) {
        this.$message.error('选择dlv路径失败：' + error.message)
      }
    },

    formatPath(path) {
      if (!path) return ''
      // 如果是默认的'dlv'，显示为"系统PATH"
      if (path === 'dlv') return '系统PATH'

      // 显示路径的最后部分
      const parts = path.split(/[/\\]/)
      if (parts.length > 3) {
        return '...' + parts.slice(-3).join('/')
      }
      return path
    }
  }
}
</script>

<style scoped>
/* 使用 Tailwind CSS */
</style>
